<template>
  <div>
    <van-nav-bar title="首页" fixed placeholder :border="false"></van-nav-bar>
    <van-notice-bar
      scrollable
      left-icon="volume-o"
      color="#1989fa"
      background="#ecf9ff"
      text="欢迎各位家长来到汕头小学三年级的学生成绩管理系统"
    />
    <div class="my-swipe">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item><img :src="getImageUrl1()" alt="" /></van-swipe-item>
        <van-swipe-item><img :src="getImageUrl2()" alt="" /></van-swipe-item>
        <van-swipe-item><img :src="getImageUrl3()" alt="" /></van-swipe-item>
        <van-swipe-item><img :src="getImageUrl4()" alt="" /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="container">
      <div class="search-box">
        <!-- <van-button type="primary" @click="goSearch()">搜索</van-button> -->
        <van-form
          :model="formPerson"
          @submit="goSearch(formPerson)"
          :rules="rules"
          ref="form"
        >
          <van-cell-group>
            <!-- 通过 pattern 进行正则校验 -->
            <div class="item">
              <van-field
                v-model="formPerson.phone"
                label="手机号"
                required
                name="phone"
                right-icon="phone-o"
                native-type="onBlur"
                placeholder="请输入手机号"
                :rules="[{ validator, message: '请输入正确的手机号' }]"
              />
            </div>
            <div class="item">
              <van-field
                v-model="formPerson.password"
                label="设置密码"
                required
                name="password"
                right-icon="shield-o"
                native-type="onBlur"
                placeholder="请输入设置登录密码"
                :rules="[
                  { pattern, message: '必须包含一个大小写字母且长度为8到16位' },
                ]"
              />
            </div>
            <div class="item">
              <van-field
                v-model="formPerson.name"
                label="家长姓名"
                required
                name="name"
                right-icon="user-o"
                native-type="onBlur"
                placeholder="请输入家长姓名"
                :rules="[
                  {
                    require: true,
                    message: '请输入正确格式的姓名',
                    trigger: 'onBlur',
                  },
                  {
                    min: 2,
                    max: 18,
                    message: '至少3 to 18个字',
                    trigger: 'blur',
                  },
                ]"
              />
            </div>
          </van-cell-group>
          <div style="margin: 16px">
            <van-button round block type="primary" native-type="submit">
              注册
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
    <TabBar />
  </div>
</template>

<script>
import MessageMainVue from "@/message";
import { ref, reactive, onMounted } from "vue";
import { Register } from "@/api/api";
import TabBar from "../../components/TabBar/TabBar.vue";
import router from "@/router";
import { Toast } from "vant";
import {useStore} from 'vuex';
import { setToken } from "@/utils/setToken";
export default {
  components: { TabBar },
  name: "parents",
  setup() {
    // vuex获取实例
    const store = useStore()
    let state = reactive({});
    let formPerson = reactive({
      phone: "",
      name: "",
      password: "",
    });
    const pattern = /^(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9~!@&%#_]{8,16}$/;
    let form = ref(null);
    // 校验函数返回 true 表示校验通过，false 表示不通过
    const validator = (val) => /^1[3-9]\d{9}$/.test(val);
    const getImageUrl1 = () => {
      // 里面可以根据需求写逻辑
      return new URL("@/assets/image/2.jpg", import.meta.url).href;
    };
    const getImageUrl2 = () => {
      // 里面可以根据需求写逻辑
      return new URL("@/assets/image/6.jpg", import.meta.url).href;
    };
    const getImageUrl3 = () => {
      // 里面可以根据需求写逻辑
      return new URL("@/assets/image/4.jpg", import.meta.url).href;
    };
    const getImageUrl4 = () => {
      // 里面可以根据需求写逻辑
      return new URL("@/assets/image/3.jpg", import.meta.url).href;
    };

    onMounted(() => {});

    const goSearch = (formPerson) => {
      // console.log(formPerson);
      form.value
        .validate()
        .then(() => {
          // console.log("搜索", formPerson);
          // MessageMainVue({ type: "success", text: "验证通过~" });
          // 注册
          Register(formPerson).then((res) => {
            console.log("---res---", res);
            if (res.status === 200) {        
              setToken('phone',formPerson.phone)
              Toast.success(res.message)
              // phone = phone;
              // password = password;
              // 带参数跳转 开
              // router.push({path:'/login',query:{phone:formPerson.phone,password:formPerson.password}})
              // router.push("/login")
              store.commit("setUser",formPerson)
              router.push({
                path: "/login"
              });
            }else if(res.status===204){
              Toast.fail(res.message)
              store.commit("setUser",formPerson)
            }
          });
        })
        .catch(() => {
          // EIMessage({ text: '验证不通过', type: 'error' })
          // MessageMainVue({ type: "error", text: "验证不通过~" });
          Toast.fail("注册失败!");
        });
    };

    return {
      state,
      formPerson,
      form,
      pattern,
      validator,
      onMounted,
      goSearch,
      getImageUrl1,
      getImageUrl2,
      getImageUrl3,
      getImageUrl4,
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  padding-bottom: 16vw;
  background-color: skyblue;

  .search-box {
    padding: 2.667vw;
    // button {
    //   width: 50%;
    //   height: 12vw;
    //   margin-left: 25%;
    //   margin-top: 10%;
    //   border-radius: 1.333vw;
    //   color: #999;
    // }
    .item {
      margin-top: 3vw;
    }
    .img {
      width: 80%;
      height: 8vw;
    }
  }

}

.van-swipe-item > img {
  width: 100%;
}
</style>
